<template>
  <div class="LoginSituationbox">
    <div class="topbox">
      <div class="danxuan">
        <span class="text" :style="{color:flag=='1'?'#409eff':'','border-bottom':flag=='1'?'2px solid #409eff':''}" @click="checktype('1')">登录情况查询</span>
        <span class="text" :style="{color:flag=='2'?'#409eff':'','border-bottom':flag=='2'?'2px solid #409eff':''}" @click="checktype('2')">登录情况统计</span>
      </div>
      <div class="tiaojian">
        <div class="leftspan">
          <span>登录日期</span>
          <span>
            <el-date-picker
              v-model="value1"
              size="small"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </span>
        </div>
        <div>
          <el-button size="small" @click="chongzhi">重置</el-button>
          <el-button type="primary" size="small" @click="checktype(flag)">查询</el-button>
        </div>
      </div>
    </div>
    <div class="bodybox">
      <LoginChaxun v-show="flag=='1'" :value1="value1" ref="LoginChaxun"></LoginChaxun>
      <LoginQingkuang v-show="flag=='2'" :value1="value1" ref="LoginQingkuang"></LoginQingkuang>
    </div>
  </div>
</template>

<script>
import LoginQingkuang from './LoginQingkuang.vue'
import LoginChaxun from './LoginChaxun.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    LoginChaxun,
    LoginQingkuang
  },
  data() {
    return {
      flag: '1',
      value1:[]
    };
  },

  mounted() {
    this.gettime()
    this.checktype(this.flag)
  },

  methods: {
    // 类型切换
    checktype(val) {
      this.flag = val
      if (val == '1') {
        this.$refs.LoginChaxun.getchaxunlist(this.value1)
      }else if(val=='2'){
        this.$refs.LoginQingkuang.getchaxunlist(this.value1)
      }
    },
    // 重置
    chongzhi() {
      this.gettime()
      this.checktype(this.flag)
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month=mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.value1=[year+'-'+month+'-'+'01',year+'-'+month+'-'+day]
    },
  },
};
</script>

<style scoped>
.LoginSituationbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 120px;
    /* line-height: 110px; */
    padding:   20px;
    background-color: #fff;
    margin-bottom: 10px;
    .danxuan{
      margin-bottom: 20px;
      span{
        margin-right: 20px;
      }
      .text{
        cursor: pointer;
      }
      .text:hover{
        color: #409eff;
      }
    }
    .tiaojian{
      display: flex;
      justify-content: space-between;
      .leftspan{
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #606266;
        span{
          margin-right: 15px;
        }
      }
    }
  }
  .bodybox{
    height: calc(100% - 130px);
    background-color: #fff;
    padding: 20px;
  }
}
</style>